﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>模块管理</title>

    <link href="../css/site.css" rel="stylesheet" />
    <style type="text/css">
        .divContent {
            width: 100%;
            height: 100%;
            /*margin-left: auto;
            margin-right:auto;*/
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /*background-color:red;*/
        }

        .moduleEditButton {
            margin: 2px;
        }

        .moduleEdit {
            width: 600px;
            height: 320px;
            /*margin-left: auto;
            margin-right:auto;*/
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
            visibility: hidden;
            /*visibility: visible;*/
        }

        .moduleEditShade {
            background-color: gray;
            opacity: 0.5;
            visibility: hidden;
        }

        .moduleParaManagerEdit {
            width: 900px;
            height: 700px;
            /*margin-left: auto;
            margin-right:auto;*/
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
            visibility: hidden;
            /*visibility: visible;*/
        }
    </style>

    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../js/config.js"></script>
    <script src="../js/site.js"></script>
    <script type="text/javascript">
        function refreshModules() {
            try {
                var prjId = Number(sessionStorage.getItem(constDefine.prjIdKey));
                var url = config.conf.baseUrl + "ProjectModule/projectID=" + prjId + "&pageSize=" + config.conf.projectPageSize + "&pageIndex=-1";
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "GET",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        clearTable("tbModules", true);
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("刷新项目模块列表失败,原因:" + data.reason);
                            return;
                        }

                        var tbModules = $("#tbModules");
                        for (var i = 0; i < data.value.length; i++) {
                            var prjModuleItem = data.value[i];
                            //var row = "<tr>" + "<td>" + SkuCode + "</td>" + "<td>" + Sn + "</td>" + "</tr>";
                            var row = $('<tr id="tr_' + prjModuleItem.id + '"></tr>');

                            var tdId = $("<td></td>");
                            tdId.append(i + 1);
                            row.append(tdId);

                            var tdPrjModuleName = $('<td id="td_' + prjModuleItem.id + '_name"></td>');
                            tdPrjModuleName.append(prjModuleItem.name);
                            row.append(tdPrjModuleName);

                            var tdPrjModuleAlias = $("<td></td>");
                            tdPrjModuleAlias.append(prjModuleItem.alias);
                            row.append(tdPrjModuleAlias);

                            var tdPrjModuleDes = $("<td></td>");
                            tdPrjModuleDes.append(prjModuleItem.des);
                            row.append(tdPrjModuleDes);

                            var tdEdit = $("<td></td>");
                            var editHtml = '<input type="button" class="editButton" value="编辑" onclick="moduleModify(' + prjModuleItem.id + ')" />' +
                                '<input type="button" class="editButton" value="删除" onclick="moduleDelete(' + prjModuleItem.id + ')" />' +
                                '<input type="button" class="editButton" value="配置" onclick="moduleConfig(' + prjModuleItem.id + ')" />';
                            tdEdit.append(editHtml);
                            row.append(tdEdit);

                            tbModules.append(row);
                        }
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function showModuleEdit() {
            $("#moduleEdit").css("visibility", "visible");
            $("#moduleEditShade").css("visibility", "visible");
        }

        function hidenModuleEdit() {
            $("#moduleEdit").css("visibility", "hidden");
            $("#moduleEditShade").css("visibility", "hidden");
        }

        function moduleModify(id) {
            try {
                var url = config.conf.baseUrl + "ProjectModule/id=" + id;
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "GET",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("查询项目模块信息失败,原因:" + data.reason);
                            return;
                        }

                        $("#txtmoduleName").val(data.value.name);
                        $("#txtmoduleAlias").val(data.value.alias);
                        $("#txtmoduleDes").val(data.value.des);
                        sessionStorage.setItem(constDefine.prjModuleIdKey, id);
                        showModuleEdit();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function moduleDelete(id) {
            try {
                var tdPrjModuleNameId = 'td_' + id + '_name';
                var prjModuleName = $("#" + tdPrjModuleNameId)[0].innerText;

                if (!window.confirm('你确定要删除模块[' + prjModuleName + ']吗？')) {
                    return;
                }

                var url = config.conf.baseUrl + "ProjectModule/id=" + id;
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "DELETE",
                    url: url,
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("删除项目模块失败,原因:" + data.reason);
                            return;
                        }

                        refreshModules();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            }
            catch (ex) {
                alert(ex.error);
            }
        }

        function showmoduleParaManager() {
            $("#moduleParaManager").css("visibility", "visible");
            $("#moduleEditShade").css("visibility", "visible");
        }

        function hidenmoduleParaManager() {
            $("#moduleParaManager").css("visibility", "hidden");
            $("#moduleEditShade").css("visibility", "hidden");
        }

        function setGroupShow(groupId) {
            var index = 1;
            var tb = document.getElementById("tbParas");
            for (var i = 1; i < tb.rows.length; i++) {
                var trId = "#" + tb.rows[i].getAttribute("id");

                if (groupId == constDefine.paraGroupAll) {
                    tb.rows[i].cells[0].innerText = index++;
                    $(trId).show();
                }
                else {
                    var trGroupId = Number(tb.rows[i].getAttribute("data-groupid"));
                    if (groupId == trGroupId) {
                        tb.rows[i].cells[0].innerText = index++;
                        $(trId).show();
                    }
                    else {
                        $(trId).hide();
                    }
                }
            }
        }

        function moduleConfig(id) {
            var prjId = Number(sessionStorage.getItem(constDefine.prjIdKey));
            var url = config.conf.baseUrl + "ModulePara/projectId=" + prjId + "&moduleId=" + id;
            var token = sessionStorage.getItem('token');
            $.ajax({
                type: "GET",
                url: url,
                headers:
                {
                    "access_token": token//此处放置请求到的用户token
                },
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (data, status) {
                    var comboxParaGroup = $("#comboxParaGroup");
                    comboxParaGroup.empty();//清空
                    clearTable("tbParas", true);

                    if (data.status != constDefine.DB_SUCESS) {
                        alert("查询模块参数信息失败,原因:" + data.reason);
                        return;
                    }

                    //组
                    var paraGroupDic = new Array();

                    //添加参数组
                    comboxParaGroup.append('<option value="' + constDefine.paraGroupAll + '">全部</option>'); //为Select追加一个Option(下拉项)
                    for (var i = 0; i < data.value.groups.length; i++) {
                        var paraGroupItem = data.value.groups[i];
                        paraGroupDic[paraGroupItem.id] = paraGroupItem.name;
                        comboxParaGroup.append('<option value="' + paraGroupItem.id + '">' + paraGroupItem.name + '</option>'); //为Select追加一个Option(下拉项)
                    }

                    //模块参数字典
                    var moduleParaDic = new Array();
                    for (var i = 0; i < data.value.moduleParas.length; i++) {
                        var modulePara = data.value.moduleParas[i];
                        moduleParaDic[modulePara.paraID] = modulePara.moduleID;
                    }

                    //添加参数
                    var tbParas = $("#tbParas");
                    for (var i = 0; i < data.value.allParas.length; i++) {
                        var paraItem = data.value.allParas[i];
                        var row = $('<tr id="tr_' + paraItem.id + '" data-groupid="' + paraItem.groupID + '" data-paraId="' + paraItem.id + '"></tr>');

                        //序号
                        var tdId = $("<td></td>");
                        tdId.append(i + 1);
                        row.append(tdId);

                        var tdparaGropuName = $('<td></td>');
                        tdparaGropuName.append(paraGroupDic[paraItem.groupID]);
                        row.append(tdparaGropuName);

                        //参数key
                        var tdparaKey = $('<td></td>');
                        tdparaKey.append(paraItem.key);
                        row.append(tdparaKey);

                        //参数名称
                        var tdparaName = $('<td id="td_' + paraItem.id + '_name"></td>');
                        tdparaName.append(paraItem.name);
                        row.append(tdparaName);

                        //参数描述
                        var tdparaGroupDes = $("<td></td>");
                        tdparaGroupDes.append(paraItem.des);
                        row.append(tdparaGroupDes);

                        //编辑
                        var tdvalue = $("<td></td>");
                        var editHtml = '';
                        var moduleId = moduleParaDic[paraItem.id];
                        if (moduleId == null || moduleId == undefined) {
                            editHtml = '<input type="checkbox" id="checkboxModuleParaEnable' + paraItem.id + '" value="' + paraItem.id + '"/>';
                        }
                        else {
                            editHtml = '<input type="checkbox" id="checkboxModuleParaEnable' + paraItem.id + '" checked="checked" value="' + paraItem.id + '"/>';
                        }

                        tdvalue.append(editHtml);
                        row.append(tdvalue);

                        tbParas.append(row);
                    }

                    sessionStorage.setItem(constDefine.prjModuleIdKey, id);
                    showmoduleParaManager();
                },
                error: function (xhr) {
                    ajaxErr(xhr);
                }
            });
        }

        function getModuleParas() {
            //{"ModuleId":123,"ParaIds":[1,2]}
            var prjModuleId = Number(sessionStorage.getItem(constDefine.prjModuleIdKey));
            var data = '{"ModuleId":' + prjModuleId + ',"ParaIds":[';

            var tb = document.getElementById("tbParas");
            var isFirstParaId = true;

            for (var i = 1; i < tb.rows.length; i++) {
                var trId = "#" + tb.rows[i].getAttribute("id");
                var paraId = Number(tb.rows[i].getAttribute("data-paraId"));
                var ck = tb.rows[i].cells[5].children[0];
                if (ck.checked) {
                    if (isFirstParaId) {
                        isFirstParaId = false;
                    }
                    else {
                        paraId = ',' + paraId;
                    }

                    data = data + paraId;
                }
            }

            data = data + ']}';
            return data;
        }

        $(document).ready(function () {
            pageLoginValidate();

            refreshModules();

            //添加模块
            $("#btnAddModule").click(function () {
                $("#txtmoduleName").val("");
                $("#txtmoduleAlias").val("");
                $("#txtmoduleDes").val("");
                sessionStorage.setItem(constDefine.prjModuleIdKey, '-1');
                showModuleEdit();
            });

            $("#btnEditModuleCancell").click(function () {
                hidenModuleEdit();
            });

            $("#btnEditModuleOk").click(function () {
                var moduleName = $("#txtmoduleName").val();
                if (moduleName == null || moduleName == "") {
                    alert("模块名称不能为空");
                    return;
                }

                var moduleAlias = $("#txtmoduleAlias").val();
                if (moduleAlias == null || moduleAlias == "") {
                    alert("模块别名不能为空");
                    return;
                }

                var moduleDes = $("#txtmoduleDes").val();
                if (moduleDes == null) {
                    moduleDes = "";
                }

                var prjId = Number(sessionStorage.getItem(constDefine.prjIdKey));
                var prjModuleId = Number(sessionStorage.getItem(constDefine.prjModuleIdKey));
                var type;
                //moduleId<0为添加模块
                if (prjModuleId < 0) {
                    type = "POST";
                }
                else {
                    type = "PUT";
                }

                var url = config.conf.baseUrl + "ProjectModule";
                var data = '{"ID":' + prjModuleId + ',"ProjectID":' + prjId + ',"Alias":"' + moduleAlias + '","Name":"' + moduleName + '","Des":"' + moduleDes + '"}';
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: type,
                    url: url,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("提交项目模块信息失败,原因:" + data.reason);
                            return;
                        }

                        hidenModuleEdit();
                        refreshModules();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            });

            $("#btnModuleParaManagerCommit").click(function () {
                var data = getModuleParas();
                var url = config.conf.baseUrl + "ModulePara";
                var token = sessionStorage.getItem('token');
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    headers:
                    {
                        "access_token": token//此处放置请求到的用户token
                    },
                    //dataType: "json",
                    success: function (data, status) {
                        if (data.status != constDefine.DB_SUCESS) {
                            alert("提交项目模块参数信息失败,原因:" + data.reason);
                            return;
                        }

                        hidenmoduleParaManager();
                    },
                    error: function (xhr) {
                        ajaxErr(xhr);
                    }
                });
            });

            $("#btnModuleParaManagerCancell").click(function () {
                hidenmoduleParaManager();
            });

            //为Select添加事件，当选择其中一项时触发
            $("#comboxParaGroup").change(function () {
                var paraGroupId = $("#comboxParaGroup").val(); //获取Select选择的Value
                setGroupShow(paraGroupId);
            });
        });
    </script>
</head>
<body class="contentBackgroundColor">
    <div class="divContent">
        <p style="text-align:center;font-size:40px;color:cadetblue;background-color:antiquewhite;margin-top:-55px">模块列表</p>

        <table id="tbModules" class="table">
            <tr>
                <th style="width:80px;">序号</th>
                <th style="width:200px;">模块名称</th>
                <th style="width:220px;">模块别名</th>
                <th style="width:330px;">模块描述</th>
                <th style="width:170px;">编辑</th>
            </tr>

            <!--<tr>
                <td>1</td>
                <td>RDPS</td>
                <td>RDPSA</td>
                <td>Des RDPS</td>
                <td>
                    <input type="button" value="编辑" onclick="moduleEdit(1)" />
                    <input type="button" value="删除" onclick="moduleDelete(1)" />
                    <input type="button" value="配置" onclick="moduleConfig(1)" />
                </td>
            </tr>-->
        </table>

        <button id="btnAddModule" class="AddButton">添加模块</button>
    </div>

    <div id="moduleEditShade" class="divContent moduleEditShade">

    </div>

    <div id="moduleEdit" class="moduleEdit">
        <style type="text/css">
            div {
                margin-left: 20px;
                margin-top: 20px;
            }

            .inputmodule {
                width: 330px;
            }
        </style>
        <p class="ptitle" style="margin-top:30px;">编辑模块信息</p>
        <div>
            <span class="spanLabel_TextAlign_Right">模块名称</span>
            <span><input type="text" class="inputmodule inputText" id="txtmoduleName" value="" /></span>
            <span class="spanLabel_Prompt">*模块名称</span>
        </div>

        <div>
            <span class="spanLabel_TextAlign_Right">模块别名</span>
            <span><input type="text" class="inputmodule inputText" id="txtmoduleAlias" value="" /></span>
            <span class="spanLabel_Prompt">*客户端请求名称</span>
        </div>
        <div>
            <span class="spanLabel_TextAlign_Right">模块描述</span>
            <span><input type="text" class="inputmodule inputText" id="txtmoduleDes" value="" /></span>
            <span class="spanLabel_Prompt">*描述</span>
        </div>

        <div style="margin-left:233px">
            <span><button class="buttonOKCancell" id="btnEditModuleOk">确定</button></span>
            <span><button class="buttonOKCancell" id="btnEditModuleCancell">取消</button></span>
        </div>
    </div>

    <div id="moduleParaManager" class="moduleParaManagerEdit">

        <div>
            <span class="spanLabel_TextAlign_Right">参数分组</span>
            <span>
                <select id="comboxParaGroup" class="select">
                    <!--<option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="opel">Opel</option>
                    <option value="audi">Audi</option>-->
                </select>
            </span>
        </div>
        <!--<p style="text-align:center;font-size:40px;color:cadetblue;background-color:antiquewhite;margin-top:0px">分组列表</p>-->

        <table id="tbParas" class="table" style="margin-top:0px;">
            <tr>
                <th style="width:80px;">序号</th>
                <th style="width:200px;">组名称</th>
                <th style="width:270px;">Key</th>
                <th style="width:320px;">参数名称</th>
                <th style="width:400px;">参数描述</th>
                <th style="width:80px;">启用</th>
            </tr>
            <!--<tr>
                <td>1</td>
                <td>酱油</td>
                <td>URL</td>
                <td>URL</td>
                <td>URL_DES</td>
                <td><input type="checkbox" id="sadf" checked="checked" value="1" /></td>
            </tr>
            <tr>
                <td>2</td>
                <td>酱油</td>
                <td>URL</td>
                <td>URL</td>
                <td>URL_DES</td>
                <td><input type="checkbox" id="sadf" checked="checked" value="1" /></td>
            </tr>-->
        </table>

        <div style="margin-left:20px">
            <span>
                <button class="buttonOKCancell" id="btnModuleParaManagerCommit">提交</button>
            </span>
            <span>
                <button class="buttonOKCancell" id="btnModuleParaManagerCancell">取消</button>
            </span>
        </div>
    </div>
</body>
</html>
